<template>
  <div class="detail">
    <div class="content">货道: {{serialNum}}</div>
    <div class="content">
      <img :src="imageUrl" style="width: 200px" alt="">
    </div>
    <div class="content">名称: {{productName}}</div>
    <div class="content">价格: {{price}}元</div>
    <button @click="pay">立即支付</button>
  </div>
</template>
<script>
  export default {
    name: 'Zfb',
    data () {
      return {
        productName: '',
        imageUrl: '',
        price: '',
        serialNum: '',
        machineID: '',
        config: {
          appid: 'wxcfd3b759765ff7ee',
        },
      }
    },

    created() {

      let str = decodeURIComponent(location.href);
      let arr = str.split('?')[1].split('&');
      this.serialNum = arr[0].split('=')[1];
      this.imageUrl = arr[1].split('=')[1];
      this.price = arr[2].split('=')[1] / 100;
      this.productName = arr[3].split('=')[1];
      this.machineUid = arr[4].split('=')[1];
    },
    methods: {
      pay () {
        let api = 'http://manage.bandtechs.com/public/pay/zfbPay/buy?';
        let key_value = `code=${this.code}&serialNum=${this.serialNum}&price=${this.price}&name=${this.productName}&machineUid=${this.machineUid}`;
        this.$http.get(api + key_value).then((res) => {
          let resData = res.data;
          if(resData.code == 200){
            location.href = resData.url;
          }
        });

      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
